<template>
  <view class="g-row">
    <image class="order-bg" mode="widthFix" :src="imageUrl +'list/bg-succ.jpg'"></image>
    <u-navbar leftText="快捷支付" @rightClick="rightClick" :autoBack="true" placeholder :safeAreaInsetTop="true"
              :bgColor="bgColor" v-if="false">
    </u-navbar>
    <view class="wp">
      <view class="m-park1">
        <view class="car">
          <view class="tit">
            车牌号码
          </view>
          <Plate :plateNumber="plateNumber" @myPlateChange="plateChange"/>
        </view>
        <view class="radbox">
          <view class="tit">
            车牌类型
          </view>
          <customradio :options="radioOptions" v-model="selectedOption"/>
        </view>
        <button class="g-submit1" @click="handleSave">下一步</button>
      </view>
      <view class="m-park2" v-if="false">
        <view class="left">
          <image class="img" mode="widthFix" :src="imageUrl +'list/pic2.png'"></image>
          <view class="txt">
            <view class="tit">
              无感快捷支付
            </view>
            <view class="desc">
              暂未开通
            </view>
          </view>

        </view>
        <navigator url="/pages/activation/activation" class="btn" hover-class="none">去开通
          <image class="icon" mode="widthFix" :src="imageUrl +'list/icon4.svg'"></image>
        </navigator>
      </view>
      <navigator url="" hover-class="none" class="m-park3" v-if="false">
        <view class="left">
          无牌车缴费
        </view>
        <view class="right">
          立即前往
          <image class="arr" mode="widthFix" :src="imageUrl +'list/arr1.svg'"></image>
        </view>
      </navigator>
      <view class="m-park4" v-if="platesNums.length">
        <view class="tit">
          常用车辆
        </view>
        <view class="group" v-for="(item, index) in platesNums" :key="index">
          <view class="left">
            <image class="icon" mode="widthFix" :src="imageUrl +'list/icon5.png'"></image>
            <view class="num" @click="plateSet(item.plate)">{{ item.plate }}</view>
            <view class="g-ps">
              <image class="bg" mode="widthFix" :src="imageUrl +'list/bg2.png'" v-if="item.checkState == 1"></image>
              <view class="span">{{ item.checkState == 1 ? "已认证" : "" }}</view>
            </view>
          </view>
          <view class="right">
            {{ item.checkState == 0 ? "审核中" : item.checkState == 1 ? "已认证" : "未认证" }}
            <image class="arr" mode="widthFix" :src="imageUrl +'list/arr1.svg'"></image>
          </view>
        </view>
        <!-- <view class="group">
          <view class="left">
            <image class="icon" mode="widthFix" :src="imageUrl +'list/icon5.png'"></image>
            <view class="num">鄂E·12345</view>
          </view>
          <view class="right right2">
            立即前往<image class="arr" mode="widthFix" :src="imageUrl +'list/arr2.svg'"></image>
          </view>
        </view> -->
      </view>
    </view>
  </view>
</template>

<script>
import {get, post} from "../../api/myHttps";
import Plate from '@/components/plate.vue'
import customradio from '@/components/customradio.vue'

export default {
  components: {
    Plate,
    customradio
  },
  data() {
    return {
      // 头部背景色
      bgColor: 'transparent',
      plateNumber: ['鄂', 'E', '', '', '', '', '', ''],
      // 单选框数据
      radioOptions: [{
        label: '小型车牌',
        value: 'option1'
      },
        {
          label: '小型新能源车牌',
          value: 'option2'
        },
        {
          label: '大型车牌',
          value: 'option3'
        },
        {
          label: '大型新能源车牌',
          value: 'option4'
        }
      ],
      selectedOption: 'option1',
      platesNums: []

    }
  },
  mounted() {
    let ownerId = uni.getStorageSync("ownerId");
    get('/city-mobile/plate/bindPlate/' + ownerId).then((res) => {
      console.log(res);
      this.platesNums = res;
    })
  },
  methods: {
    // 头部滚动
    onPageScroll(res) {
      if (res.scrollTop >= 60) {
        this.bgColor = '#ffffff'
      } else {
        this.bgColor = 'transparent'
      }
    },
    plateChange(val) {
      this.plateNumber = val;
      console.log("打印val:", val);
    },
    plateSet(val) {
      this.plateNumber = val.split('');
      this.plateNumber.push('');
    },
    // 保存
    handleSave() {
      let plate = "";
      this.plateNumber.forEach((item, index) => {
        if (index === 1) {
          plate = plate + item + "·";
        } else {
          plate += item;
        }
      })
      let p = plate.replace('·', '');
      console.log(p);
      const ownerId = uni.getStorageSync('ownerId');
      post('/city-pay/inroadPay/eulb/calcListRoadOrders?ownerId=' + ownerId + "&plate=" + p, {}).then((res) => {
        console.log(res);
        if (res.length < 1) {
          uni.showToast({
            title: '暂无待缴记录!',
            icon: 'error'
          })
          return
        }
        uni.navigateTo({
          url: '/pages/order/aoverduepay?plate=' + p + '&ownerId=' + ownerId,
        })
      })
    }

  }
}
</script>


<style lang="less" scoped>
</style>
